<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head></head>
<body>
  <div th:fragment="content">
    <div class="row">
      <div class="col-xs-12">
        <div class="box">
          <div class="box-header">
            <!-- 按钮组 -->
            <div class="btn-group operation">
              <button id="btn_add" type="button" class="btn bg-primary">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
              </button>
              <button id="btn_edit" type="button" class="btn bg-info">
                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
              </button>
              <button id="btn_delete" type="button" class="btn btn-success">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
              </button>
            </div>
            <!-- end 按钮组 -->
          </div>
          <!-- /.box-header -->
          <div class="box-body">
            <table id="articles" class="table table-bordered table-striped">
              <thead>
                <tr>
                  <th>文章ID</th>
                  <th>标题</th>
                  <th>分类</th>
                  <th>作者</th>
                  <th>发布时间</th>
                  <th>浏览次数</th>
                  <th>状态</th>
                </tr>
              </thead>
            </table>
          </div>
          <!-- /.box-body -->
        </div>
        <!-- /.box -->
      </div>
      <!-- /.col -->
    </div>
    <!-- /.row -->
    
    <script th:inline="none">
      $(function() {
        // 初始化文章表格
        var table = $('#articles').DataTable({
          'ajax': 'article/list',
          'paging': true,
          'lengthChange': true,
          'searching': true,
          'ordering': true,
          'info': true,
          'autoWidth': false,
          'language': {
            'lengthMenu': '每页显示 _MENU_ 条记录',
            'zeroRecords': '暂无记录',
            'info': '第 _PAGE_ 页 / 共 _PAGES_ 页',
            'infoEmpty': '暂无记录',
            'infoFiltered': '(从 _MAX_ 条记录中筛选)',
            'search': '搜索:',
            'paginate': {
              'first': '首页',
              'last': '末页',
              'next': '下一页',
              'previous': '上一页'
            }
          }
        });
        
        // 绑定表格选择行事件
        $('#articles tbody').on('click', 'tr', function() {
          if ($(this).hasClass('selected')) {
            $(this).removeClass('selected');
          } else {
            table.$('tr.selected').removeClass('selected');
            $(this).addClass('selected');
          }
        });
        
        // 加载分类下拉框
        function loadCategories() {
          $.getJSON(
            'article/categoryList',
            function(result) {
              $("#sel_add_category").empty();
              $("#sel_edit_category").empty();
              
              $.each(result.data, function(index, item) {
                var option = '<option value="' + item[0] + '">' + item[1] + '</option>';
                $("#sel_add_category").append(option);
                $("#sel_edit_category").append(option);
              });
            }
          );
        }
        
        // 加载标签下拉框
        function loadTags() {
          $.getJSON(
            'article/tagList',
            function(result) {
              $("#sel_add_tag").empty();
              $("#sel_edit_tag").empty();
              
              $.each(result.data, function(index, item) {
                var option = '<option value="' + item[0] + '">' + item[1] + '</option>';
                $("#sel_add_tag").append(option);
                $("#sel_edit_tag").append(option);
              });
            }
          );
        }
        
        // 加载文章标签
        function loadArticleTags(aid) {
          $.getJSON(
            'article/tags/' + aid,
            function(result) {
              $("#edit_tags_container").empty();
              
              $.each(result.data, function(index, item) {
                var tagId = item[0];
                var tagName = item[1];
                var tagHtml = '<span class="label label-info" style="margin-right: 5px; display: inline-block; padding: 5px;">' + 
                              tagName + 
                              ' <a href="javascript:void(0)" onclick="removeTag(' + aid + ', ' + tagId + ')" style="color: white;">' +
                              '<i class="fa fa-times"></i></a></span>';
                $("#edit_tags_container").append(tagHtml);
              });
            }
          );
        }
        
        // 删除标签
        window.removeTag = function(aid, tid) {
          if (!confirm('确认移除此标签吗?')) {
            return;
          }
          
          $.post(
            'article/removeTagFromArticle',
            {
              'aid': aid,
              'tid': tid
            },
            function(obj) {
              if (obj.Status == 'ok') {
                loadArticleTags(aid);
              } else {
                alert(obj.msg);
              }
            },
            'json'
          );
        };
        
        // 页面加载时初始化分类和标签
        loadCategories();
        loadTags();
        
        // 绑定添加按钮事件
        $('#btn_add').click(function() {
          $('#modal-add').modal();
        });
        
        // 绑定编辑按钮事件
        $('#btn_edit').click(function() {
          var aid;
          try {
            aid = table.row('.selected').data()[0];
          } catch(err) {
            return;
          }
          
          $.getJSON(
            '/article/get/' + aid,
            function(data) {
              $("#edit_aid").val(data.aid);
              $("#edit_title").val(data.title);
              $("#edit_content").val(data.content);
              $("#edit_summary").val(data.summary);
              $("#sel_edit_category").val(data.cid);
              
              // 加载文章标签
              loadArticleTags(data.aid);
              
              $('#modal-edit').modal();
            }
          );
        });
        
        // 绑定删除按钮事件
        $('#btn_delete').click(function() {
          var aid;
          try {
            aid = table.row('.selected').data()[0];
          } catch(err) {
            return;
          }
          
          if (!confirm('确认删除此文章吗?')) {
            return;
          }
          
          $.post(
            '/article/delete',
            {'aid': aid},
            function(obj) {
              if (obj.Status == 'ok') {
                table.ajax.reload();
              } else {
                alert(obj.msg);
              }
            },
            'json'
          );
        });
        
        // 添加文章
        $('#btn_save_article').click(function() {
          var data = $('#add_article_form').serialize();
          
          $.post(
            'article/add',
            data,
            function(obj) {
              if (obj.Status == 'ok') {
                table.ajax.reload();
                $('#modal-add').modal('hide');
              } else {
                alert(obj.msg);
              }
            },
            'json'
          );
        });
        
        // 修改文章
        $('#btn_update_article').click(function() {
          var data = $('#edit_article_form').serialize();
          
          $.post(
            'article/update',
            data,
            function(obj) {
              if (obj.Status == 'ok') {
                table.ajax.reload();
                $('#modal-edit').modal('hide');
              } else {
                alert(obj.msg);
              }
            },
            'json'
          );
        });
        
        // 添加标签到文章
        $('#btn_add_tag').click(function() {
          var aid = $("#edit_aid").val();
          var tid = $("#sel_edit_tag").val();
          
          if (!aid || !tid) {
            return;
          }
          
          $.post(
            'article/addTagToArticle',
            {
              'aid': aid,
              'tid': tid
            },
            function(obj) {
              if (obj.Status == 'ok') {
                loadArticleTags(aid);
              } else {
                alert(obj.msg);
              }
            },
            'json'
          );
        });
      });
    </script>
    
    <!-- 添加模态框 -->
    <div class="modal fade" id="modal-add">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title">添加文章</h4>
          </div>
          <div class="modal-body">
            <div class="box box-primary">
              <!-- form start -->
              <form role="form" id="add_article_form">
                <div class="box-body">
                  <div class="form-group">
                    <label for="add_title">文章标题</label>
                    <input type="text" class="form-control" id="add_title" name="title" placeholder="文章标题" required>
                  </div>
                  <div class="form-group">
                    <label for="sel_add_category">分类</label>
                    <select class="form-control" id="sel_add_category" name="cid" required>
                    </select>
                  </div>
                  <div class="form-group">
                    <label for="add_summary">摘要</label>
                    <textarea class="form-control" id="add_summary" name="summary" placeholder="文章摘要" rows="3"></textarea>
                  </div>
                  <div class="form-group">
                    <label for="add_content">内容</label>
                    <textarea class="form-control" id="add_content" name="content" placeholder="文章内容" rows="10" required></textarea>
                  </div>
                </div>
                <!-- /.box-body -->
              </form>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary" id="btn_save_article">保存</button>
          </div>
        </div>
        <!-- /.modal-content -->
      </div>
      <!-- /.modal-dialog -->
    </div>
    <!-- end 添加模态框 -->
    
    <!-- 编辑模态框 -->
    <div class="modal fade" id="modal-edit">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title">修改文章</h4>
          </div>
          <div class="modal-body">
            <div class="box box-primary">
              <!-- form start -->
              <form role="form" id="edit_article_form">
                <div class="box-body">
                  <input type="hidden" id="edit_aid" name="aid">
                  <div class="form-group">
                    <label for="edit_title">文章标题</label>
                    <input type="text" class="form-control" id="edit_title" name="title" placeholder="文章标题" required>
                  </div>
                  <div class="form-group">
                    <label for="sel_edit_category">分类</label>
                    <select class="form-control" id="sel_edit_category" name="cid" required>
                    </select>
                  </div>
                  <div class="form-group">
                    <label for="edit_summary">摘要</label>
                    <textarea class="form-control" id="edit_summary" name="summary" placeholder="文章摘要" rows="3"></textarea>
                  </div>
                  <div class="form-group">
                    <label for="edit_content">内容</label>
                    <textarea class="form-control" id="edit_content" name="content" placeholder="文章内容" rows="10" required></textarea>
                  </div>
                  <div class="form-group">
                    <label>标签</label>
                    <div id="edit_tags_container" class="well well-sm">
                      <!-- 标签内容将动态加载 -->
                    </div>
                    <div class="input-group">
                      <select id="sel_edit_tag" class="form-control">
                        <!-- 标签选项将动态加载 -->
                      </select>
                      <span class="input-group-btn">
                        <button type="button" id="btn_add_tag" class="btn btn-info">添加标签</button>
                      </span>
                    </div>
                  </div>
                </div>
                <!-- /.box-body -->
              </form>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary" id="btn_update_article">保存</button>
          </div>
        </div>
        <!-- /.modal-content -->
      </div>
      <!-- /.modal-dialog -->
    </div>
    <!-- end 编辑模态框 -->
  </div>
</body>
</html> 